import React, { useState, useMemo } from 'react';
import { createShare } from '@/hooks/cross';
import styles from './Portal.less';
console.log({ s: styles });

const share = createShare(null as any);

/**
 * 接受主应用到外面区域的放置区域
 */
function TargetPlace() {
  const gotVdom = share.useInject(); // 从传送门取出内容，完整的 vdom
  return (
    <div className={styles.TargetPlace}>
      It's TargetPlace, injected vdom is below
      {gotVdom}
    </div>
  )
}

function MainBusiness() {
  const [state, setState] = useState(0);
  const vdomShowState = useMemo(() => (<div>state: {state}</div>), [state]);
  share.useProvide(vdomShowState); // 将 vdom 发给远端组件展示
  return (
    <div style={{color: "blue"}} onClick={() => setState(v => v + 1)}>
      click to increase state, <br/>
      result is at bottom-right corner. <br />
      证明 react 自身的 Portal 其实不是必要，完全可以仅靠基础技术支持出来。
    </div>
  );
}

export default function PortalByShareVDom() {
  return (
    <div>
      <TargetPlace />
      <hr/>
      <MainBusiness />
    </div>
  )
}
